.menu {
    position: fixed;
    top: var(--navbar-height);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100vw;
    background: var(--standart-el);
    padding: 20px;
    transition: all 0.25s ease-in-out;
    z-index: 2;

    .links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        li {
            list-style: none;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 10px 0;
            gap: 20px;
            
            :nth-child(1) {
                width: 30px;
                height: 30px;
                fill: var(--accent-txt);
            }

            :nth-child(2) {
                text-decoration: none;
            }
        }
    }    
}

.collapsed {
    transform: translateY(-100%);
}

.blurer {
    display: none;
    backdrop-filter: blur(0);
}

.blured {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    background-color: var(--transp-bg);
    backdrop-filter: blur(7px);
    height: 100vh;
    width: 100%;
}
